<template>
	<view>
		<zy-empty v-if="formList.length==0"></zy-empty>
			<view v-for="(item, index) in formList" :key="item.id" v-else>
				<zy-group :title="$t('homepage.CallDeal.dealTime')+$t('public.colon') + item.handleDate"
					:btnList="btnList" @btnHandle="btnHandle(item, index)" model="card">
					<view class="content">
						<text class="title">{{$t('homepage.CallDeal.billCode')}}{{$t('public.colon')}}</text>
						<view class="text">{{item.billNo}}</view>
					</view>
					<view class="content">
						<text class="title">{{$t('homepage.CallDeal.dealPeople')}}{{$t('public.colon')}}</text>
						<view class="text">{{item.handleUserName}}</view>
					</view>
					<view class="content">
						<text class="title">{{$t('homepage.CallDeal.resolve')}}{{$t('public.colon')}}</text>
						<view class="text">{{item.remarks}}</view>
					</view>
				</zy-group>
			</view>
		<!-- 弹出层 -->
		<zy-popup ref="popup" :title="$t('public.detail')">
			<scroll-view scroll-y="true" style="height:55vh;">
				<zy-forms :model="formDetail" border labelWidth="120">
					<zy-form-item :label="$t('homepage.CallDeal.billCode')+$t('public.colon')"><text
							class="formText">{{formDetail.billNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.callTime')+$t('public.colon')"><text
							class="formText">{{formDetail.createTime || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.callType')+$t('public.colon')"><text
							class="formText">{{formDetail.reasonType || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.callPeople')+$t('public.colon')"><text
							class="formText">{{formDetail.billUserName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.callReason')+$t('public.colon')"><text
							class="formText">{{formDetail.reasonRemarks || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.dealTime')+$t('public.colon')"><text
							class="formText">{{formDetail.handleDate || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.dealPeople')+$t('public.colon')"><text
							class="formText">{{formDetail.handleUserName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.CallDeal.resolve')+$t('public.colon')"><text
							class="formText">{{formDetail.remarks || $t('public.null')}}</text>
					</zy-form-item>
				</zy-forms>
			</scroll-view>
			<zy-button type="primary" @click="confirm">{{$t('public.confirm')}}</zy-button>
		</zy-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				btnList: [{
					text: this.$t('public.detail'),
					type: 'primary'
				}],
				formDetail: {
					createTime: '',
					reasonRemarks: '',
					billUserName: '',
					reasonType: '',
					checkList: '',
					handleDate: '',
					billNo: '',
					handleUserName: '',
					remarks: '',
				}
			}
		},
		props: {
			formList: {
				type: Array,
				default: []
			}
		},
		methods: {
			// 表单领取
			btnHandle(item, index) {
				console.log(item)
				this.$refs.popup.open()
				this.formDetail = item
			},
			confirm() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		align-items: center; //上下对齐
		padding: 20rpx;
		width: calc(100% - 40rpx);
	}

	.title {
		color: #999;
		width: 30%;
	}

	.text {
		text-align: right;
		width: 70%;
	}

	.formText {
		color: #999;
	}
</style>